<template>
  <div class="add-member-level">
    <Row type='flex' justify="center">
      <Col>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="120">
          <FormItem prop="memberLevel" label="会员等级编号：">
            <Row type="flex" align="middle">
              <Col>
                <Input type="text" :value="'v' + formInline.memberLevel" disabled style="width:280px"></Input>
              </Col>
              <Col style="margin-left:10px;color: #808695"><span>v0为最低等级，数字越大等级越高</span></Col>
            </Row>
          </FormItem>
          <FormItem label="会员等级名称：" prop="memberLevelName">
            <Row type="flex" align="middle">
              <Col>
                <Input type="text" @on-keyup="filterSpaceName" v-model="formInline.memberLevelName" placeholder="请输入" :maxlength="6" style="width:280px"></Input>
              </Col>
              <Col style="margin-left:10px;color: #808695"><span>最大长度为6个字</span></Col>
            </Row>
          </FormItem>
          <FormItem prop="integralEnd" label="累计经验值区间：">
            <Row type="flex" align="middle">
              <Col><span style="padding-right:5px;">{{formInline.integralStart}} ≤ 累计经验值 &lt;</span>{{formInline.integralEnd}}</Col>
            </Row>
          </FormItem>
          <FormItem label="勋章头像：" prop="headImage" class="upload-img">
            <Row type="flex" align="top">
              <Col>
                <Upload ref="upload"
                    :format="['jpg','png']"
                    :max-size="50"
                    :on-success="handleSuccess"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    type="drag"
                    :show-upload-list="false"
                    :action="$config.uploadImg"
                    style="display: inline-block;width:96px;">
                  <img :src="formInline.headImage?formInline.headImage:defaultUrl"
                  style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                  alt="">
                </Upload>
                 <p v-if="formInline.headImage && imgloaded" class="replace_tit" @click="delHeadImage">删除</p>
              </Col>
              <Col>
                <div style="width:118px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;">支持格式：.jpg、.png规格：128px*128px大小：≤50K</div>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" style="width:100px" @click="handleSubmit('formInline')">确定</Button>
            <Button class="btn"
                  style="margin-left:20px;width:100px"
                  @click="closePage">取消</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import { updateMemberLevel, getMemberLevelList } from '@/api/member/index'
import { routeEqual } from '@/libs/util'
export default {
  name: 'member_level_edit',
  data () {
    return {
      formInline: {
        memberLevelId: '',
        memberLevel: '',
        memberLevelName: '',
        integralStart: '',
        integralEnd: '',
        headImage: ''
      },
      ruleInline: {
        memberLevel: [
          { required: true }
        ],
        memberLevelName: [
          { required: true, message: '会员等级名称不能为空', trigger: 'blur' }
        ],
        headImage: [
          { required: true, message: '勋章头像不能为空', trigger: 'change' }
        ]
      },
      imgloaded: true,
      defaultUrl: require('@/assets/images/add.png')
    }
  },
  methods: {
    filterSpaceName () {
      this.formInline.memberLevelName = this.formInline.memberLevelName.replace(/\s+/g, '')
    },
    filterSpaceintegral () {
      this.formInline.integralEnd = this.formInline.integralEnd.replace(/[^0-9]/g, '')
    },
    closePage () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'member_level_list'
        })
      })
    },
    handleMaxSize (file) {
      this.$Message.warning({
        title: '上传的图片大小不能超过50k'
      })
    },
    handleFormatError (file) {
      this.$Message.warning({
        title: '上传的图片格式错误'
      })
    },
    handleSuccess (response, file, fileList) {
      var img = new Image()
      img.src = response.full_img_url
      var _this = this
      let temsrc = _this.formInline.headImage
      _this.formInline.headImage = response.full_img_url
      img.onload = function () {
        if (img.width !== 128 || img.height !== 128) {
          _this.$Message.warning('上传的图片规格不符')
          _this.formInline.headImage = temsrc
        } else {
          _this.imgloaded = true
          _this.formInline.headImage = response.full_img_url
        }
      }
    },
    delHeadImage () {
      this.formInline.headImage = ''
      this.imgloaded = false
    },
    handleSubmit () {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          updateMemberLevel({
            merchantId: this.$store.state.user.merchantId,
            memberLevelId: this.formInline.memberLevelId,
            headImage: this.formInline.headImage,
            memberLevelName: this.formInline.memberLevelName,
            operatorId: this.$store.state.user.userId,
            operatorName: this.$store.state.user.userName
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('编辑会员等级成功')
              this.closePage()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    }
  },
  created () {
    getMemberLevelList({
      merchantId: this.$store.state.user.merchantId,
      memberLevel: this.$route.params.id
    }).then(res => {
      if (res.data.status === 200) {
        this.formInline = {
          memberLevelId: res.data.data[0].memberLevelId,
          memberLevel: res.data.data[0].memberLevel,
          memberLevelName: res.data.data[0].memberLevelName,
          integralStart: res.data.data[0].integralStart,
          integralEnd: res.data.data[0].integralEnd + '',
          headImage: res.data.data[0].headImage
        }
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .add-member-level{
    padding-top: 100px;
  }
  .replace_tit{
    position: absolute;
    left: 0;
    top: 72px;
    width: 96px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    opacity: 0.8;
    background: #ED4014;
    color: #fff;
  }
</style>
